<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .hh1 { 
        font-family:serif;
    }
    .hh2 { 
        font-family:sans-serif;
    }
    p {
        text-indent: 2em;/*设置段落开头缩进距离 */
        width: 200px;
        background-color: skyblue;
    }

    .s1 {
        text-decoration: overline;/*上划线*/   
    }

    .s2 {
        text-decoration: underline;/*下划线*/  
    }

    .s3 {
        text-decoration: line-through;/*中划线*/  
    }

    .s4{
        text-decoration: none;/*取消下划线*/  
    }

    .p1 {
        letter-spacing: 10px;
    }

    .p2 {
        letter-spacing: -2px;
    }

    .p3{
        word-spacing: 20px;
    }

    .left{
        text-align: left;
    }

    .right{
        text-align: right;
    }

    .center{
        text-align: center;
    }

    .hh4{
        width: 200px;
        background-color: skyblue;
        line-height: 100px;
    }
</style>
<body>
    <h1 class="hh1">衬线字体</h1>
    <h1 class="hh2">非衬线字体</h1>

    <!-- 首行缩进
    text-indent: 设置段落开头缩进距离 -->
    <p>用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。</p><br>

    <!-- 文本的修饰
        text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。 -->
    <span class="s1">上划线</span>
    <span class="s2">下划线</span>
    <span class="s3">中划线</span>
    <a class="s4" href="">取消下划线</a>

    <!-- 字母间距和单词间距
        letter-spacing : 用来设置字符之间的间距。
         word-spacing: 用来设置单词之间的间距。
        这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。 -->
    <p class="p1">不凡学院bufan</p>
    <p class="p2">不凡学院bufan</p>
    <p class="p3">不 凡学  院bu fan</p>

    <!-- 文本对齐
         text-align用于设置文本的对齐方式。
     可选值：
            left：左对齐
            right：右对齐
            center：居中对齐     -->
    <p class="left">时辰的错</p>
    <p class="right">时辰的错</p>
    <p class="center">时辰的错</p>

    <!-- line-height用于设置行高，行高越大则行间距越大。 -->
    <h4 class="hh4">用于设置行高，行高越大则行间距越大。</h4>
</body>
</html>